<!DOCTYPE html>
<html>
<head>
  <title>Todo List</title>
</head>

<body>
<!-- <center>
<font color="”red" ”>Welcome to Web Site</font>
</center> -->

<div class="main" style="color: rgb(53, 39, 114)">
  <div class="row">
    <input class="input" type="text" id="inputtext" onkeydown="handlekeydown(event)"/>
    <input
            type="button"
            name="bt"
            value="添加"
            onclick="handleClick(event)"
            id="button1"
    />
    <input type="button" name="bt" value="删除" id="button2" />
  </div>

  <div id="todogroup">
    <!-- <div id="todo1"><input class="inck" type="checkbox"/>吃饭<button id="todob1" onclick="deleteIndex(1)"> 删除</button></div>
    <div id="todo2"><input class="inck" type="checkbox"/>睡觉<button id="todob2" onclick="deleteIndex(2)"> 删除</button></div>
    <div id="todo3"><input class="inck" type="checkbox"/>打豆豆<button id="todob3" onclick="deleteIndex(3)"> 删除</button></div> -->
  </div>

  <span style="color: rgb(96, 96, 113)">endline-----======</span>

  <div id="all_selected">
    <input
            type="checkbox"
            id="all_selectedip"
            onclick="clickSelectBox(event)"
    />

    <label id="checkboxSign" for="all_selected">全选</label>
  </div>
</div>
</body>
<style>
  /* padding: 20px 30px 40px 50px     --与父容器上下左右的距离 */
  /* padding-top: 20px                --与父容器上侧距离 */
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }

  .main {
    /* background-color: aqua;
    width: 240px;
    height: 240px; */
    background-color: #70d8f0;
    padding: 8px;
    border: 6px solid rgb(141, 237, 202);
    border-radius: 8px;
  }

  .row {
    display: flex;
    border: 3px;
    border-color: #1c1d1e;
    /* background-color: #c5dbee; */
  }

  #inputtext {
    flex-grow: 1;
    /* width: 100%; */
    /* height: 30px; */
    /* background-color: #d4ebb9; */
    /* color: white; */
    margin: 6px;
    padding: 3px;
    border-radius: 4px;
  }

  #button1 {
    /* flex-grow: 1; */
    margin: 6px;
    padding: 3px;
    border-radius: 4px;
  }

  #button2 {
    /* flex-grow: 1; */
    margin: 6px;
    padding: 3px;
    border-radius: 4px;
    /* margin-left: 200px; */
  }

  .item {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    /* width: 100%; */
    /* height: 30px; */
    /* background-color: #d4ebb9; */
    /* color: white; */
    margin: 6px;
    padding: 3px;
  }

  .item-value {
    flex-grow: 1;
    color: rgb(0, 0, 0);
  }

  .item-del {
    color: aliceblue;
    background-color: rgb(230, 180, 245);
    border: 0px;
    /* margin-left: 200px; */
  }
  .input {
    padding: 8px;
    outline: none;
    border: 2px soild #b1afaf;
  }
  .item-del {
    color: white;
    background-color: purple;
    border: 0px;
    opacity: 0;

    /* opacity: 0; */
    /* clear:both;
float:right; */
    margin-left: 200px;
  }
  .item:hover {
    background-color: rgb(169, 110, 205);
  }
  .item:hover .item-del {
    opacity: 1;
  }
  .input:focus {
    box-shadow: 0px 0px 10px rgb(239, 150, 202);
    border: 2px solid rgb(239, 150, 202);
  }
</style>
<script lang="javascript">
  var tot=1;
  function init() {
    console.log("init");
    // document.getElementById('button2').onclick= handleClick;
    // document.getElementById('button2').onclick = handleClickDeleteLast;
    document.getElementById('button2').onclick = handleClickDeleteindex;
    console.log("after init");
  }

  function handlekeydown(e){
    console.log("key in:" + e.key);
    if(e.key=="Enter")
    {
      document.getElementById("button1").click();
    }
  }


  function deleteIndex(a){

    console.log("deleteIndex");
    console.log(a);

    // document.getElementById("checkboxSign").innerHTML="全选";
    // document.getElementById("all_selectedip").checked=false;


    var temp = document.getElementById("todogroup");
    document.getElementById("todo"+a).remove();
  }

  function clickSelectBox(e) {
    console.log("clickSelectBox");
    console.log(e);
    var temp = document.getElementsByClassName("inck");
    for (var i = 0; i < temp.length; i++) {
      temp[i].checked = e.target.checked;
    }

    if(e.target.checked)
    {
      document.getElementById("checkboxSign").innerHTML="全不选";
    }
    else
    {
      document.getElementById("checkboxSign").innerHTML="全选";
    }
  }


  function handleClickDeleteindex(e) {
    console.log("handleClickDeleteIndex");
    console.log(e);

    document.getElementById("checkboxSign").innerHTML="全选";
    document.getElementById("all_selectedip").checked=false;

    var temp = document.getElementById("todogroup");
    // temp.removeChild(temp.childNodes[1]);
    //枚举temp的子节点
    for (var i = temp.childNodes.length-1; i >= 0; i--) {
      //temp1是当前节点
      // var temp1 = temp.childNodes[i];

      //判断单选框是否被勾选，如果被勾选，则删除这个节点
      if (temp.childNodes[i].firstChild .checked) {
        temp.removeChild(temp.childNodes[i]);
      }
      // if(temp.childNodes[i].getElementsByTagName("input"))
      // {
      //   temp.removeChild(temp.firstChild);
      //   console.log(temp.childNodes[i]);
      // }

    }


  }

  function handleClickDeleteLast(e) {
    console.log("handleClickDeleteLast");
    console.log(e);
    var temp = document.getElementById("todogroup");
    temp.removeChild(temp.lastChild);
  }

  function handleClick(e) {
    console.log("handleClick");
    console.log(e);



    //
    document.getElementById("checkboxSign").innerHTML="全选";
    document.getElementById("all_selectedip").checked=false;


    // var temp = document.getElementById("inputtext");
    var temp = getValue();

    document.getElementById("inputtext").value = "";

    if(temp==""){
      alert("输入的todo事件不允许为空！");
      return;
    }

    document.getElementById("todogroup").innerHTML +=
            "<div class='item' id=\"todo"+
            tot+
            "\"><input class=\"inck\" type=\"checkbox\"/>" +
            "<div class='item-value'>"+
            temp +
            '</div>'+
            "<button class='item-del' id=\"todob\""+
            tot +
            "\"  onclick=\"deleteIndex("+
            tot +
            ")\"> 删除</button>"+ "</div>";
    // document.getElementById("todogroup").insertAdjacentHTML("<div>" + temp + "</div>");
    // console.log(temp.value);
    // document.getElementsByClassName("main")[0].style="background-color: #333333"
    tot++;
  }

  function getValue() {
    var temp = document.getElementById("inputtext");
    console.log(temp.value);
    return temp.value;
  }



  init();
</script>
</html>
